<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AP CSA Real Time Learning</title>
    <!--下面两个是使用Code Mirror必须引入的-->
    <link rel="stylesheet" href="codemirror-5.64.0/lib/codemirror.css">
    <script src="codemirror-5.64.0/lib/codemirror.js"></script>
    <script src="codemirror-5.64.0/mode/clike/clike.js"></script>
    <style>
        .CodeMirror {
            background-color: #efefef;
            height: 400px;
        }
        div.editor {
            width: 640px;
            display: inline-block;
            margin: 10px;
        }
        .display-flex {
            display: flex;
        }
    </style>
</head>

<body>

    <div class="display-flex">
        
       
    
        <div class="editor">
            白一一
            <textarea id="code2"></textarea>
        </div>

        <div class="editor">
            陈浩洋
            <textarea id="code3"></textarea>
        </div>
        <div class="editor">
            李可
            <textarea id="code5"></textarea>
        </div>
        
    </div>
    <hr>
    <div class="display-flex">
        <div class="editor">
            周可涵
            <textarea id="code4"></textarea>
        </div>

        

        <div class="editor">
            吕宜临
            <textarea id="code6"></textarea>
        </div>
        <div class="editor">
            林玉蕾
            <textarea id="code7"></textarea>
        </div>
    </div>
    <hr>
    <div class="display-flex">
      
        <div class="editor">
            coding written by teacher here will show to student
            <input type="button" value="run" onclick="runCode()">
            <textarea id="code"></textarea>
        </div>
        
    </div>
    
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
        //根据DOM元素的id构造出一个编辑器

        var socket = io();

        var code1 = CodeMirror.fromTextArea(document.getElementById("code"), {
            lineNumbers: true,width:"200px",
            mode: "text/x-java" //实现Java代码高亮
        });

        code1.on("update", function(event){
            console.log("ss");
            socket.emit("teacher code", code1.getDoc().getValue())
        })

        
        function generateEditor(id) {
            return CodeMirror.fromTextArea(document.getElementById(id), {
                lineNumbers: true,width:"200px",
                mode: "text/x-java" //实现Java代码高亮
            });
        }
        let code2 = generateEditor("code2")
        let code3 = generateEditor("code3")
        let code4 = generateEditor("code4")
        let code5 = generateEditor("code5")
        let code6 = generateEditor("code6")
        let code7 = generateEditor("code7")
        
        

        socket.on('chat message', function(msg) {
            if(msg["name"] == "baiyiyi"){
                code2.getDoc().setValue(msg["msg"]);
            }
            if(msg["name"] == "chenhaoyang"){
                code3.getDoc().setValue(msg["msg"]);
                console.log(msg)
            }
            if(msg["name"] == "zhouzihan"){
                code4.getDoc().setValue(msg["msg"]);
                console.log(msg)
            }
            if(msg["name"] == "like"){
                code5.getDoc().setValue(msg["msg"]);
                console.log(msg)
            }
            if(msg["name"] == "lvyilin"){
                code6.getDoc().setValue(msg["msg"]);
                console.log(msg)
            }
            if(msg["name"] == "linyulei"){
                code7.getDoc().setValue(msg["msg"]);
                console.log(msg)
            }
            
          });

          function runCode(){
              console.log("run code..")
            socket.emit('run code', code1.getDoc().getValue())
          }

          
    </script>
</body>

</html>